---
title: Strony
description: Wprowadzenie do stron Astro
i18nReady: true
---

import ReadMore from '~/components/ReadMore.astro';
import Since from '~/components/Since.astro'

**Strony** to pliki znajdujące się w podkatalogu `src/pages/` Twojego projektu Astro. Odpowiadają one za obsługę routingu, ładowanie danych i ogólny układ każdej strony Twojej witryny internetowej.

## Obsługiwane typy plików stron

Astro obsługuje następujące typy plików w katalogu `src/pages/`:
- [`.astro`](#strony-astro)
- [`.md`](#strony-markdownmdx)
- `.mdx` (z zainstalowaną [Integracją MDX](/pl/guides/integrations-guide/mdx/#installation))
- [`.html`](#strony-html)
- `.js`/`.ts` (jako [endpointy](/pl/guides/endpoints/))

## Routing oparty na plikach

Astro wykorzystuje strategię routingu zwaną **routingiem opartym na plikach**. Każdy plik w Twoim katalogu `src/pages/` zamienia się w endpoint na Twojej stronie, w oparciu o jego lokalizację w strukturze plików.

Pojedynczy plik może również generować wiele stron za pomocą [dynamicznego routingu](/pl/guides/routing/#dynamic-routes). Pozwala to tworzyć strony nawet wtedy, gdy Twoja zawartość znajduje się poza specjalnym katalogiem `/pages/`, na przykład w [kolekcji zawartości](/pl/guides/content-collections/) lub [CMS](/pl/guides/cms/).

<ReadMore>Przeczytaj więcej o [Routingu w Astro](/pl/guides/routing/).</ReadMore>

### Linkowanie między stronami

Napisz standardowe elementy HTML [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) na Twoich stronach Astro, aby linkować do innych stron na Twojej stronie. Użyj **ścieżki URL względnej do Twojej domeny głównej** jako Twojego linka, a nie względnej ścieżki pliku.

Na przykład, aby linkować do `https://example.com/authors/sonali/` z dowolnej innej strony na `example.com`:

```astro title="src/pages/index.astro"
Przeczytaj więcej <a href="/authors/sonali/">o Sonali</a>.
```

## Strony Astro

Strony Astro używają rozszerzenia pliku `.astro` i obsługują te same funkcje co [komponenty Astro](/pl/basics/astro-components/).

```astro title="src/pages/index.astro"
---
---
<html lang="pl">
  <head>
    <title>Moja Strona Główna</title>
  </head>
  <body>
    <h1>Witaj na mojej stronie!</h1>
  </body>
</html>
```

Strona musi produkować pełny dokument HTML. Jeśli nie zostanie to jawnie uwzględnione, Astro domyślnie doda niezbędną deklarację `<!DOCTYPE html>` i zawartość `<head>` do każdego komponentu `.astro` zlokalizowanego w `src/pages/`. Możesz zrezygnować z tego zachowania dla poszczególnych komponentów, oznaczając je jako [częściowe](#strony-częściowe) strony.

Aby uniknąć powtarzania tych samych elementów HTML na każdej stronie, możesz przenieść wspólne elementy `<head>` i `<body>` do własnych [komponentów układu](/pl/basics/layouts/). Możesz użyć tylu komponentów układu, ile chcesz.

```astro {3} /</?MySiteLayout>/
---
// src/pages/index.astro
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>Zawartość mojej strony, opakowana w układ!</p>
</MySiteLayout>
```

<ReadMore>Przeczytaj więcej o [komponentach układu](/pl/basics/layouts/) w Astro.</ReadMore>

## Strony Markdown/MDX

Astro traktuje również pliki Markdown (`.md`) wewnątrz `src/pages/` jako strony w Twojej końcowej witrynie. Jeśli masz zainstalowaną [Integrację MDX](/pl/guides/integrations-guide/mdx/#installation), to pliki MDX (`.mdx`) traktowane są w ten sam sposób.

:::tip
Rozważ utworzenie [kolekcji treści](/pl/guides/content-collections/) zamiast stron dla katalogów powiązanych plików Markdown, które mają podobną strukturę, na przykład dla postów na blogu lub produktów.
:::

Pliki Markdown mogą wykorzystywać specjalną właściwość frontmatter `layout`, aby określić [komponent układu](/pl/basics/layouts/), który otoczy ich treść Markdown w pełny dokument strony  `<html>...</html>`.

```md {3}
---
# Przykład: src/pages/page.md
layout: '../layouts/MySiteLayout.astro'
title: 'Moja strona Markdown'
---
# Tytuł

To jest moja strona, napisana w **Markdown.**
```

<ReadMore>Przeczytaj więcej o [Markdown](/pl/guides/markdown-content/) w Astro.</ReadMore>

## Strony HTML

Pliki z rozszerzeniem `.html` mogą być umieszczone w katalogu `src/pages/` i używane bezpośrednio jako strony na Twojej stronie. Zauważ, że niektóre kluczowe funkcje Astro nie są obsługiwane w [Komponentach HTML](/pl/basics/astro-components/#komponenty-html).

## Niestandardowa strona błędu 404

Aby uzyskać niestandardową stronę błędu 404, możesz utworzyć plik `404.astro` lub `404.md` w `src/pages`.

To zbuduje stronę `404.html`. Większość [usług wdrożeniowych](/pl/guides/deploy/) znajdzie ją i jej użyje.

## Niestandardowa strona błędu 500

Aby uzyskać niestandardową stronę błędu 500 do wyświetlenia dla stron, które są [renderowane na żądanie](/pl/guides/on-demand-rendering/), utwórz plik `src/pages/500.astro`. Ta niestandardowa strona nie jest dostępna dla stron renderowanych wstępnie i nie może być wstępnie renderowana.

Jeśli wystąpi błąd podczas renderowania tej strony, Twojemu odwiedzającemu zostanie pokazana domyślna strona błędu 500 Twojego hosta.

<p><Since v="4.10.3" /></p>

W fazie rozwoju aplikacji, przy obecności pliku `500.astro`, błąd rzucony w czasie wykonywania jest logowany w Twoim terminalu, w przeciwieństwie do pokazywania się w nakładce błędów.

### `error`

<p><Since v="4.11.0" /></p>

`src/pages/500.astro` to specjalna strona, która automatycznie otrzymuje prop `error` dla każdego błędu rzuconego podczas renderowania. Pozwala to na użycie szczegółów błędu (np. ze strony, z middleware, itp.) do wyświetlenia informacji Twojemu odwiedzającemu.

Typ danych prop error może być dowolny, co może wpłynąć na to, jak typujesz lub używasz wartości w swoim kodzie:

```astro title="src/pages/500.astro"
---
interface Props {
    error: unknown
}

const { error } = Astro.props
---

<div>{error instanceof Error ? error.message : 'Nieznany błąd'}</div>
```

Aby uniknąć wycieku wrażliwych informacji podczas wyświetlania zawartości z prop `error`, rozważ najpierw ocenienie błędu i zwrócenie odpowiedniej zawartości na podstawie rzuconego błędu. Na przykład, powinieneś unikać wyświetlania błędu stosu, ponieważ zawiera on informacje o tym, jak Twój kod jest strukturyzowany na serwerze.

## Strony częściowe

<p><Since v="3.4.0" /></p>

:::caution
Strony częściowe są przeznaczone do użycia w połączeniu z biblioteką front-endową, taką jak [htmx](https://htmx.org/) lub [Unpoly](https://unpoly.com/). Możesz ich również użyć, jeśli czujesz się komfortowo pisząc niskopoziomowy JavaScript po stronie front-endu. Z tego powodu jest to zaawansowana funkcja.

Dodatkowo, strony częściowe nie powinny być używane, jeśli komponent zawiera style lub skrypty o ograniczonym zasięgu, ponieważ te elementy zostaną usunięte z wyjścia HTML. Jeśli potrzebujesz stylów o ograniczonym zasięgu, lepiej jest użyć zwykłych stron, a nie częściowych wraz z biblioteką frontendową, która potrafi scalić zawartość do nagłówka.
:::

Strony częściowe to komponenty stron zlokalizowane w `src/pages/`, które nie są przeznaczone do renderowania jako pełne strony.

Podobnie jak komponenty zlokalizowane poza tym folderem, te pliki nie zawierają automatycznie deklaracji `<!DOCTYPE html>`, ani żadnej zawartości `<head>`, takiej jak style i skrypty o ograniczonym zasięgu.

Jednakże, ponieważ znajdują się one w specjalnym katalogu `src/pages/`, wygenerowany HTML jest dostępny pod adresem URL odpowiadającym jego ścieżce pliku. Pozwala to bibliotece renderującej (np. htmx, Stimulus, jQuery) na dostęp do niego po stronie klienta i dynamiczne ładowanie sekcji HTML na stronie bez odświeżania przeglądarki lub nawigacji strony.

Strony częściowe, w połączeniu z biblioteką renderującą, zapewniają alternatywę dla [wysp Astro](/pl/concepts/islands/) i [tagów `<script>`](/pl/guides/client-side-scripts/) do budowania dynamicznej zawartości w Astro.

Pliki stron, które mogą eksportować wartość (np. `.astro`, `.mdx`) mogą być oznaczone jako częściowe.

Skonfiguruj plik w katalogu `src/pages/`, aby był częściowy, dodając następujący eksport:

```astro title="src/pages/partial.astro" ins={2}
---
export const partial = true;
---

<li>Jestem częściowy!</li>
```

`export const partial` musi być możliwy do zidentyfikowania w sposób statyczny. Może przyjmować następujące wartości:

- Wartość logiczną __`true`__.
- Zmienną środowiskową używającą import.meta.env, na przykład `import.meta.env.USE_PARTIALS`.

### Używanie z biblioteką

 Strony częściowe są używane do dynamicznego aktualizowania sekcji strony za pomocą biblioteki takiej jak [htmx](https://htmx.org/).

 Poniższy przykład pokazuje atrybut `hx-post` ustawiony na URL strony częściowej. Zawartość ze strony częściowej zostanie użyta do aktualizacji docelowego elementu HTML na tej stronie. 

```astro title="src/pages/index.astro" 'hx-post="/partials/clicked/"'
<html>
  <head>
    <title>Moja strona</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
</html>
<section>
  <div id="parent-div">Cel tutaj</div>

  <button hx-post="/partials/clicked/"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="innerHTML"
  >
      Kliknij Mnie!
  </button>
</section>
```

Strona częściowa `.astro` musi istnieć pod odpowiednią ścieżką pliku i zawierać eksport definiujący stronę jako częściową:

```astro title="src/pages/partials/clicked.astro" {2}
---
export const partial = true;
---
<div>Zostałem kliknięty!</div>
```

Zobacz [dokumentację htmx](https://htmx.org/docs/) aby uzyskać więcej szczegółów na temat używania htmx.
